import { useState, useEffect } from 'react';
import { Modal, Descriptions, Spin, Divider, Button } from 'antd'
import ProTable from '@ant-design/pro-table'
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons"
import { getContractInfoDetail, getIncomeDetailByContractId} from "@/services/contract";
import { authority, detail } from '@/tools/tool';
import ModifyCode from "@/pages/Business/Contract/extra/modifyCode";
import RefundContract from "@/pages/Business/Contract/extra/refundContract";
import { useModel, Access } from 'umi'

const ContractDetail = (props: any) => {
  const { visible, data, onCancel } = props
  const init = useModel('@@initialState');
  // @ts-ignore
  const { currentUser } = init.initialState
  const [spinning, setSpin] = useState(true)
  const [state, setState] = useState("")
  const [info, setInfo] = useState("")
  const [dataSource, setDataSource] = useState([])
  const [IncomeSource, setIncomeSource] = useState([])
  const [color, setColor] = useState("rgba(0, 0, 0, 0.85)")
  const [dataInfo, setDataInfo] = useState({
    last_month_input_count: 0,
    last_month_output_count: 0,
    current_month_input_count: 0,
    current_month_output_count: 0
  })
  const [modifyV, setModifyV] = useState(false)
  const [source, setData] = useState({})
  const [refundV, setRefundV] = useState(false)
  const { Item } = Descriptions

  const columns = [
    {
      dataIndex: 'linkman',
      title: '联系人',
      width: 100,
      ellipsis: true,
    },
    {
      dataIndex: 'link_telephone',
      title: '联系电话',
      width: 120,
      ellipsis: true,
    },
    {
      dataIndex: 'account_number',
      title: '用户账号',
      width: 120,
      ellipsis: true,
    },
    {
      dataIndex: 'account_password',
      title: '用户密码',
      width: 80
    },
    {
      dataIndex: 'install_address',
      title: '通信地址',
      width: 150,
      ellipsis: true,
    },
    {
      dataIndex: 'package_name',
      title: '服务套餐',
      hideInSearch: true,
      width: 100,
      ellipsis: true,
    },
    {
      dataIndex: 'start_date',
      title: '开始时间',
      hideInSearch: true,
      width: 100,
      valueType: 'date'
    },
    {
      dataIndex: 'end_date',
      title: '结束时间',
      hideInSearch: true,
      width: 100,
      valueType: 'date'
    },
    {
      dataIndex: 'memo',
      title: '备注',
      width: 100,
      ellipsis: true,
    },
    {
      title: '装维人员',
      dataIndex: 'installer',
      width: 100,
      ellipsis: true,
    },
    {
      dataIndex: 'operator',
      title: '受理人',
      width: 100,
      ellipsis: true,
    }

  ]
  const moneyColumns = [
    {
      dataIndex: 'contract_id',
      title: '合同编号'
    },
    {
      title: '收入类型',
      dataIndex: 'detail_type',
      render: (text: any) => detail(text)
    },
    {
      title: '设备类型',
      dataIndex: 'equipment_type'
    },
    {
      title: '设备编码',
      dataIndex: 'equipment_code',
      render: (value: any, rowData: any) => rowData.equipment_code ? <a style={{ color: '#404048' }} onClick={() => {
        setModifyV(true)
        setData(rowData)

      }}>{value}</a> : <span>{value}</span>
    },
    {
      title: '金额',
      dataIndex: 'amount',
      valueType: 'money'
    },
    {
      title: '备注',
      dataIndex: 'memo',
      width: 100,
      ellipsis: true,
    },
    {
      title: '付款时间',
      dataIndex: "pay_time",
      valueType: 'dateTime',
      width: 180
    },
    {
      title: '退费时间',
      dataIndex: 'refund_time',
      valueType: 'dateTime',
      width: 180
    },
    {
      title: '退费金额',
      dataIndex: 'refund_money',
      valueType: 'money'
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      width: 100,
      render: (_: any, rowData: any) => [
        <Access key={'1'} accessible={authority('56', currentUser.operation)}>
          {!(detail(rowData.detail_type) === '初装费' || detail(rowData.detail_type) === '赠送时长') ?
            <a key={'1'} onClick={() => {
              setRefundV(true)
              setData(rowData)
            }}>退费</a> : null}
        </Access>

      ]
    }
  ]
  const getIncomeDetail = (contractId: any) => {
    setSpin(true)
    getIncomeDetailByContractId({ contractId: contractId }).then(res => {
      if (res.status === 200) {
        setSpin(false)
        setIncomeSource(res.data)
      }
    })
  }
  useEffect(() => {
    if (visible && data) {
      console.log(data.contract_id);
      
      getContractInfoDetail({ contractId: data.contract_id }).then(res => {
        if (res.status === 200) {
          setSpin(false)
          // eslint-disable-next-line @typescript-eslint/no-shadow
          const data = res.data
          setState(data.state)
          setInfo(data.info)
          setDataSource(data.source)
          setIncomeSource(data.income)
          setDataInfo(data.flow)
        }
      })
      
    } else {
      setDataSource([])
      setIncomeSource([])
      setSpin(true)
    }

  }, [visible, data])
  useEffect(() => {
    let timer
    if (visible) {
      timer = setInterval(() => {
        // @ts-ignore
        if (document.getElementById('preDown') && document.getElementById('preDown').style.color === 'rgb(0, 229, 0)') {
          // @ts-ignore
          document.getElementById('preDown').style.color = "#7fecad";
          // @ts-ignore
          document.getElementById('nowDown').style.color = "#7fecad";
        } else if (document.getElementById('preDown')) {
          // @ts-ignore
          document.getElementById('preDown').style.color = "rgb(0, 229, 0)";
          // @ts-ignore
          document.getElementById('nowDown').style.color = "rgb(0, 229, 0)";
        }
        // @ts-ignore
        if (document.getElementById('preUp') && document.getElementById('preUp').style.color === 'rgb(68, 206, 246)') {
          // @ts-ignore
          document.getElementById('preUp').style.color = "#4c8dae";
          // @ts-ignore
          document.getElementById('nowUp').style.color = "#4c8dae";
        } else if (document.getElementById('preUp')) {
          // @ts-ignore
          document.getElementById('preUp').style.color = "rgb(68,206,246)";
          // @ts-ignore
          document.getElementById('nowUp').style.color = "rgb(68,206,246)";
        }
      }, 500)
    } else {
      clearInterval(timer)
    }

  }, [visible])
  // @ts-ignore
  return (
    <Modal
      destroyOnClose
      title={'用户详情'}
      visible={visible}
      onCancel={onCancel}
      width={'80vw'}
      mask={false}
      maskClosable={false}
      keyboard={false}
      closable={false}
      footer={<Button onClick={() => onCancel()}>关闭</Button>}
    >

      <Spin spinning={spinning} tip={'数据查询中...'}>
        <Descriptions bordered>
          <Item label={'接入账号'}>
            {data.account_number}
          </Item>
          <Item label={'宽带状态'} contentStyle={{ color: state.includes("停用") ? "red" : "green", fontWeight: 'bold' }}>
            {state}
          </Item>
          <Item label={'上线时间'} contentStyle={{ color: info.includes("停用") ? "red" : "black" }}>
            {info}
          </Item>
          <Item label="当月流量" span={2}>
            <ArrowUpOutlined id={'nowUp'} />上行流量：{dataInfo.current_month_output_count} GB <Divider
              type="vertical" /><ArrowDownOutlined id={'nowDown'} />下行流量：{dataInfo.current_month_input_count} GB
          </Item>
          <Item label="上月流量" span={2}>
            <ArrowUpOutlined id={'preUp'} />上行流量：{dataInfo.last_month_output_count} GB <Divider
              type="vertical" /><ArrowDownOutlined id={'preDown'} />下行流量：{dataInfo.last_month_input_count} GB
          </Item>
        </Descriptions>
        <Divider />
        <ProTable title={() => '账号详情'} columns={columns} search={false} options={false} dataSource={dataSource}
          pagination={false} rowKey={({ contract_id }) => contract_id} onRow={({ contract_id }) => {
            return {
              // eslint-disable-next-line @typescript-eslint/no-unused-vars
              onClick: event => {
                getIncomeDetail(contract_id)
              },
            };
          }} />
        <Divider />
        <ProTable title={() => '缴费详情'} columns={moneyColumns} search={false} options={false} pagination={false}
          dataSource={IncomeSource} />

      </Spin>
      <ModifyCode
        visible={modifyV}
        onClose={() => {
          setModifyV(false)
          setData({})
        }}
        onOk={() => {
          setModifyV(false)
          setData({})
          getIncomeDetail(data.contract_id)
        }}
        data={source}
      />
      <RefundContract
        visible={refundV}
        onClose={() => {
          setRefundV(false)
          setData({})
        }}
        onOk={() => {
          setRefundV(false)
          setData({})
          getIncomeDetail(data.contract_id)
        }}
        data={source}
      />
    </Modal>
  );
};

export default ContractDetail;
